<template>
    <div>
        <div v-for="(item, index) in resultList" :key="index + 'ranking'" class="ranking">
            <div class="icon">
                <img :src="icon(index)" />
                <div class="number" :class="{ white: index < 3 }">
                    {{ index + 1 }}
                </div>
            </div>
            <div class="name">
                {{ item.name }}
            </div>
            <div class="progress">
                <div
                    class="progress-body" :class="{ ['ranking' + index]: index < 3 }"
                    :style="{ width: (item.percentage || item.value || 0) + '%' }"
                >
                </div>
            </div>
            <div class="value">
                {{ item.value + (isShowPercent ? '%' : '') }}
            </div>
        </div>
    </div>
</template>

<script lang="ts"  setup>
import { getImageUrl } from '@/utils/index';
import { computed } from 'vue';
import { toRefs } from 'vue';

export interface ListItem {
    value: number;
    name: string;
    code?: string;
    percentage?: number;
}
const props = defineProps<{
    list: ListItem[],
    isShowPercent?: boolean;
}>();

const { list } = toRefs(props);

const resultList = computed(()=>list.value.filter(item=>item.value>0));

const iconMap: { [key: number]: string } = {
    0: getImageUrl('ranking1.png'),
    1: getImageUrl('ranking2.png'),
    2: getImageUrl('ranking3.png'),
    3: getImageUrl('ranking4.png'),
};
// const icon = ref<string>('');
const icon = (level: number) => {

    if (level < 3) {
        return iconMap[level];
    }
    return iconMap[3];

};
</script>

<style lang="scss" scoped>
.ranking {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 17px;

    .icon {
        width: 16px;
        height: 18px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;

        .number {
            color: #958f8f;
            position: relative;
            z-index: 1;
            font-size: 10px;

            &.white {
                color: white;
            }
        }

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }
    }

    .name {
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        font-size: 12px;
        color: #6c6868;
        width: 61px;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .progress {
        flex: 1;
        margin: 0 12px;

        &-body {
            background: #ededed;
            border-radius: 4px;
            height: 8px;

            &.ranking0 {
                background-color: #ffb633;
            }

            &.ranking1 {
                background-color: #bcc0cf;
            }

            &.ranking2 {
                background-color: #eacca8;
            }
        }
    }

    .value {
        width: 40px;
        text-align: right;
        font-size: 12px;
        color: #6c6868;
    }
}
</style>
